<template>
    <a-layout>
        <Header/>
        <a-layout>
            <a-layout-sider width="200" style="background: #fff;height: calc(100vh - 64px - 70px)">
                <a-menu
                        v-model:selectedKeys="selectedKeys"
                        :openKeys="openKeys"
                        @openChange="onOpenChange"
                        mode="inline"
                        :style="{ height: '100%', borderRight: 0 }"
                >
                    <a-sub-menu key="sub1">
                        <template #title>
              <span>
                <laptop-outlined/>
                商品管理
              </span>
                        </template>
                        <a-menu-item key="/admin/brand">
                            <router-link to="/admin/brand">品牌管理</router-link>
                        </a-menu-item>
                        <a-menu-item key="/admin/category">
                            <router-link to="/admin/category">分类管理</router-link>
                        </a-menu-item>
                        <a-menu-item key="/admin/specification">
                            <router-link to="/admin/specification">规格管理</router-link>
                        </a-menu-item>
                        <a-menu-item key="/admin/templates">
                            <router-link to="/admin/templates">模板管理</router-link>
                        </a-menu-item>
                        <a-menu-item key="/admin/goods">
                            <router-link to="/admin/goods">商品管理</router-link>
                        </a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="sub2">
                        <template #title>
              <span>
                <notification-outlined/>
                广告管理
              </span>
                        </template>
                        <a-menu-item key="/admin/contentCategory">
                            <router-link to="/admin/contentCategory">广告类别</router-link>
                        </a-menu-item>
                        <a-menu-item key="/admin/content">
                            <router-link to="/admin/content">广告内容</router-link>
                        </a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>
            <a-layout>
                <router-view style="padding: 0 24px;height: calc(100vh - 64px - 70px);overflow-y: scroll;overflow-x: hidden"/>
            </a-layout>
        </a-layout>
        <Footer/>
    </a-layout>
</template>

<script lang="ts">
    import {defineComponent, reactive, toRefs} from 'vue';
    import Header from "@/components/Header.vue";
    import Footer from "@/components/Footer.vue";

    export default defineComponent({
        name: 'HomeView',
        components: {
            Footer,
            Header
        },
        setup() {
            const state = reactive({
                rootSubmenuKeys: ['sub1', 'sub2', 'sub3'],
                openKeys: ['sub1'],
                selectedKeys: [],
            });

            const onOpenChange = (openKeys: string[]) => {
                const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
                if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
                    state.openKeys = openKeys;
                } else {
                    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
                }
            };

            return {
                ...toRefs(state),
                onOpenChange
            }
        }
    });
</script>
